<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <link rel="stylesheet" href="../../css/dialog.css" />
    <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
    <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />
    <style>
    	
         #nrdvMsgBox{
			z-index: 99999;
		}
		#nrShowBolightBox{
			z-index: 9999;
		}
  
    </style>
    <![endif]-->
    <title>结果</title>
</head>
<body>
	<div class="classifiedBox">
	     <div class="classified-search">
             <form class="form-horizontal" style="margin-bottom: 5px;">
                 <fieldset>
                  <div class="control-group">
                    <div class="controls">
                    <p style="float: left;line-height: 34px;">日期范围：</p>
                     <div class="input-prepend input-group" style="float: left;width:150px ;">
                     
                     	<span class="add-on input-group-addon">
                     		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                     	</span>
                     	<input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" /> 
                   </div>
                     <p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>
                    </div>
                  </div>
                 </fieldset>
              </form>

	        <div class="purchase-situation">
	            产品分类：         <span id="ying"  class="selected">新版考试宝典</span>
	            	<span id="allsingleproducts">全部单品</span>
	                <span id="zyyszcp">执业药师</span>
	                <span id="yxzcp">药学职称</span>
	                <span id="yjksp">医技考试</span>
	                <span id="zyysp">执业医师</span>
	                <span id="zyyssp">住院医师</span>
	                <span id="hlksp">护理考试</span>
	                <span id="zzzyp">主治中医</span>
	                <span id="zzysp">主治医师</span>
	                <span id="yxgjp">医学高级</span>
	                <br>
                    <span id="jsgjksbdp" style="margin-left: 80px;">技师高级职称</span>
	                <span id="jszjksbdp">技师中级职称</span>
	                <span id="jscjksbdp">技师(士)初级</span>
	                <span id="hlxgjzcksbdp">护理高级职称</span>
	                <span id="yxzjzcksbdp">医学中级职称</span>
	                <span id="cjhsksbdp">初级护师</span>
	                <span id="zghsksbdp">主管护师</span>
	                <span id="wkgjzcksbdp">外科高级职称</span>
	                <span id="wkzzysksbdp">外科主治医师</span>
	                <span id="nkgjzcksbdp">内科高级职称</span>
	                <span id="nkzzysksbdp">内科主治医师</span>
	                <span id="yxksbdp">医学</span>
	                <i>（*多选）</i>
	        </div>
	         <div class="product-classification">
	            <div class="productR">
	                数据分类：
	            </div>
	            <div class="productL">
                    <span class="selected">启动人数</span>
	                <span>启动次数</span>
	                <i>（*单选）</i>
	            </div>
	        </div>
	        <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
	        <!--<div class="refresh">
	            <img src="../../img/refresh.png" alt="">
	            <a class="tabReload" href="#">刷新当前</a>
	        </div>-->
	    </div>
    </div>
    <!--数据展示结果-->
    <img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />
    
    <div class="panel-body" style="display: none;">
    	<div class="titleNum"></div>
    	<div class="title" style="width:100%">
    		<ul class="title1" >
    			<li class="list1">启动设备数据占比图</li>
    			<li id="main1" class="main">
    			</li>
    		</ul>
    		<ul class="title2" >
    			<li class="list1">启动设备数据趋势图</li>
    			
    			<li id="main" class="main">
    				
    			</li>
    		</ul>
    	</div>
        
    </div>
    
    <script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
    <!--<script src="../js/charts/Chart.js"></script>-->
    <script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
    <script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="../../js/base/ajax.js"></script>
    <script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
    <script type="text/javascript" src="../../js/base/dialog.js"></script>
    <script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/riqi/moment.js"></script>
    <script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>

    <script type="text/javascript">
    	
	    var myDate = new Date();//添加日期
       	y=myDate.getFullYear(); 
       	m=myDate.getMonth()+1;
       	d=myDate.getDate()-1;
       	if(myDate.getDate()==1){
       		 d=myDate.getDate();
       	}
       	dqy=y+"-"+m+"-"+d;
       	$('#reservation').val(dqy+" - "+dqy)
               $(document).ready(function() {
                  $('#reservation').daterangepicker({
                        // startDate: moment().startOf('day'),  
                        //endDate: moment(),  
                        //minDate: '01/01/2012',    //最小时间  
                        maxDate : moment(), //最大时间   
                        dateLimit : {  
                            days : 30  
                        }, //起止时间的最大间隔  
                        showDropdowns : true,  
                        showWeekNumbers : false, //是否显示第几周  
                        timePicker : false, //是否显示小时和分钟  
                        timePickerIncrement : 60, //时间的增量，单位为分钟  
                        timePicker12Hour : false, //是否使用12小时制来显示时间  
                        ranges : {  
                            //'最近1小时': [moment().subtract('hours',1), moment()],  
                            '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                            '最近7日': [moment().subtract('days', 6), moment()],
                            '最近30日': [moment().subtract('days', 29), moment()],  
                            '最近60日': [moment().subtract('days', 59), moment()]  
                        },  
                        opens : 'right', //日期选择框的弹出位置  
                        buttonClasses : [ 'btn btn-default' ],  
                        applyClass : 'btn-small btn-primary blue',  
                        cancelClass : 'btn-small',  
                        format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式  
                        separator : ' - ',  
                        locale : {  
                            applyLabel : '确定',  
                            cancelLabel : '取消',  
                            fromLabel : '从',  
                            toLabel : '到',  
                            weekLabel: 'W',
                            customRangeLabel : '选择时间',  
                            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
                            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
                                    '七月', '八月', '九月', '十月', '十一月', '十二月' ]
//                          firstDay : 1  
                        }  
                    }, function(start, end, label) {//格式化日期显示框  
                        $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));  
                    }); 
					
               });
        $(document).on('click','.applyBtn',function(){//判断日期是否是在60天之内
       	    var val=$('#reservation').val().split(' - ');
          	var endTime=new Date(val[1]);
          	var startTime=new Date(val[0]);
          	if(endTime - startTime>5270400000){
          		$('.daterangepicker').css('display','block')
          		G_Prg.alert('每次最多选取60天');
          	}
        })
        var clients = [];
        var clientsName = [];
		var hTimes = ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点",
    				"10点","11点","12点","13点","14点","15点","16点","17点","18点","19点",
    				"20点","21点","22点","23点"
    				];
		var hwChart;
		var swChart;
		var times=[];//两个日期之间的区间
        this.init = function(){
            var option = {};
            var dd=new Date();
            var m=dd.getMonth()+1;
            var d1=dd.getDate();
            var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
            var days2=  dd.getFullYear()+'-'+m+'-'+d1;
            $('#logmin').val(days1);
            $('#logmax').val(days1);
            allclick();//点击事件

        }

        /**************************************************
         * 功能：点击事件
         * 函数名：allclick（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-13
         *************************************************/
        function allclick() {
            //刷新页面
            $('.refresh').on('click',function(){
                window.location.reload();
            })
            //切换科目选项 (全选反选)
		            
                $('.purchase-situation span').on('click',function(){
	            if($(this).attr('id')=='ying'){
						$(this).addClass('selected').siblings().removeClass('selected');
				}else if($(this).attr('id')=='allsingleproducts'){
						$(this).addClass('selected').siblings().removeClass('selected');
				}else{ 
				   if($(this).hasClass('selected')){
                       $(this).removeClass('selected');
                       $('.purchase-situation span').eq(0).removeClass('selected');
                       $('.purchase-situation span').eq(1).removeClass('selected');
                   }else{
                       $(this).addClass('selected')
                       $('.purchase-situation span').eq(0).removeClass('selected');
                       $('.purchase-situation span').eq(1).removeClass('selected');
                   }
				}
                })
             $('.productL span').on('click',function(){
				$(this).addClass('selected').siblings().removeClass('selected');
            })
            //切换情况选项
//          $('.purchase-situation span').on('click',function(){
//              if($(this).hasClass('selected')){
//                  $(this).removeClass('selected');
//              }else{
//                  $(this).addClass('selected').siblings().removeClass('selected');
//              }
//          })
            //查询结果
            $('#btncx').on('click',function(){
	            var val=$('#reservation').val().split(' - ');
	            var startTime=new Date(val[0]);
	            var endTime=new Date(val[1]);
	            if(endTime-startTime<5270400000){
	                $('.loadingimg').show();
	            	$('.panel-body').hide();
	            	setTimeout(function(){
	            		$('.panel-body').show();
	                    getLoginData();
	//	                    getLoginCount();
	                    window.onresize = function () {
					        hwChart.resize();
					        swChart.resize();
					    }
	            	},500)
	            }else{
	           		G_Prg.alert('每次最多选取60天');
	            }
            })
			
        }

        /**************************************************
         * 功能：数据绘图
         * 函数名：Canvas1（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-30
         *************************************************/
        function Canvas1(jsonData,times,clientsName){
            var series =[];
            var xAxis =[];
            var StyleSin = function(){
                return {
                    data:[],
                    axisLabel: {
						show: true,
						textStyle: {
							color: '#000',
							fontFamily: "microsoft yahei",
							fontSize: 12
						}
					}
                }
            };
            var Item = function(){
                return {
                    name:'',
                    type:'line',
                    itemStyle: {normal: {}},
                    label: {normal: {}},
                    data:[]
                }
            };
			//x轴分为两种情况 （1.0-23小时  2.时间日期 xxxx-xx-xx）
            for(var i =0;i<jsonData.length;i++){
                if(times.length>1 && clients.length==1){
                    var it = new Item();
                    var style = new StyleSin();
                    it.name = clientsName[i];
                    it.type = 'line';
                    it.data = jsonData[0].data.split(',');
                    style.data = times;
                    style.type = 'category';
                    style.boundaryGap = false;
                    style.name='(时间)';
                    series.push(it);// 将item放在series中
                    xAxis.push(style);

                }
                if(times.length == 1 && clients.length==1){
                	
                    var it = new Item();
                    var style = new StyleSin();
                    it.name = clientsName[i];
                    it.type = 'line';
                    it.data = jsonData[0].data.split(',');
                    style.data = hTimes;
                    style.type = 'category';
                    style.boundaryGap = false;
                    style.name='(时间)';
                    series.push(it);// 将Itemsin放在series中
                    xAxis.push(style);// 将StyleSin放在xAxis中
                }
                if(times.length == 1 && clients.length>1){
                    var it = new Item();
                    var style = new StyleSin();
                    var datanum = [ ];
                    it.name = clientsName[i];
                    it.type = 'line';
                    it.data = jsonData[i].data.split(',');
                    style.data = hTimes;
                    style.type = 'category';
                    style.boundaryGap = false;
                    style.name='(时间)';
                    series.push(it);// 将Itemsin放在series中
                    xAxis.push(style);// 将StyleSin放在xAxis中
                }
                //日期为x轴 折线图
                if(times.length > 1 && clients.length > 1){
                    var it = new Item();
                    var style = new StyleSin();
                    it.name = clientsName[i];
                    it.type = 'line';
                    it.data = jsonData[i].data.split(',');
                    style.data = times;
                    style.type = 'category';
                    style.boundaryGap = false;
                    style.name='(时间)';
                    series.push(it);// 将Itemsin放在series中
                    xAxis.push(style);// 将StyleSin放在xAxis中
                }

            }
            // 基于准备好的dom，初始化echarts实例
             swChart = echarts.init(document.getElementById('main'));
			
            // 指定图表的配置项和数据
            option = {
                title: {
                	x:'20',
                    text: ''
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:[
                        {
                            name:clientsName,
                            textStyle:{color:'#3c8dbc',fontSize:16}
                        }
                    ]
                },
                 grid: {
			        left: '2%',
			        bottom: '0%',
			        containLabel: true
			    },
                yAxis: {

                    type : 'value'

                },
                series: []
            };
            option.series = series;
            option.xAxis = [{  //修改上面的日期
         	    axisLabel:{show:true},
                textStyle:{color:"#000",fontFamily:"microsoft yahei",fontSize:12},
                boundaryGap:false,
                name:"(时间)",
                type:"category",
                data:xAxis[0].data
            }];

            // 使用刚指定的配置项和数据显示图表。
            swChart.setOption(option);
        }
             
             
         /**************************************************
         * 功能：数据绘图(饼状图)
         * 函数名：Canvas2（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-30
         *************************************************/
        function Canvas2(jsonData,clientsName){
        	var json=[]
            for(var i=0;i<jsonData.length;i++){
            	 var arr={
            	 	name:clientsName[i],
            	 	value:jsonData[i].data
            	 }
        	     json.push(arr)
            }
        	// 基于准备好的dom，初始化echarts实例
            hwChart = echarts.init(document.getElementById('main1'));
            
        	var option1 = {
				title : {
				    text: '',
				    x:'center'
				},
				tooltip : {
				    trigger: 'item',
				    formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
				    orient : 'vertical',
				    x : 'right',
				    data:clientsName
				},
				toolbox: {
				    show : false,
				    feature : {
				        mark : {show: true},
				        dataView : {show: true, readOnly: false},
				        magicType : {
				            show: true, 
				            type: ['pie', 'funnel'],
				            option: {
				                funnel: {
				                    x: '10%',
				                    width: '50%',
				                    funnelAlign: 'left',
				                    max: 1548
				                }
				            }
				        },
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				calculable : false,
				series : [
				    {
				        name:'来源',
				        type:'pie',
				        radius : '60%',
				        center: ['50%', '50%'],
				        data:json,
				        itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 10,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
				    }
				    ]
				};
        	//使用刚指定的配置项和数据显示图表。
            hwChart.setOption(option1);
            
        }
            
            
        /**************************************************
         * 功能：登录成功人数数据 /api/new/loginCount
         * 接口：https://tongji.ksbao.com:8003
         * 函数名：getLoginData（）
         * 传入参数：startDay    开始时间
         *         endDay      结束时间
         *         clients     所选单品
         *         userType    购买未购买[0未购买、1购买、2合计]
         * 创建人：刘淳昊 2017-03-20
         *************************************************/
        function getLoginData(){
            var val=$('#reservation').val().split(' - ');
            var startTime = val[0];
            var endTime = val[1];
            clients=[];
            clientsName=['全部单品'];
            $('.singleApp .selected').each(function(){
            	clients.push($(this).attr('id'));
            	clientsName.push($(this).text());
				
            });
            $('.purchase-situation .selected').each(function(){
            	clients.push($(this).attr('id'));
            	clientsName.push($(this).text());
            });
            getAll(startTime,endTime);
            var userType = $('.purchase-situation .selected').attr('id'); 
                if($('.productL .selected').html() == "启动次数"){
                	var dataType = "次数";
                }else{
                	var dataType = "人数";
                }
            var clientsData = JSON.stringify(clients);
            var clientsNameData = JSON.stringify(clientsName);
            	var _url='/api/new/startAppCount?startDay='+startTime+'&endDay='+endTime+'&clients='+clientsData+'&dataType='+dataType;
            	 G_AjaxApi_test.get(_url,false,function(json){
                var jsonData = JSON.parse(json);

                if(jsonData.status ==200){
                    if(jsonData.data.length ==0){
                        G_Prg.alert('数据为空');
                    }else{
                    	$('.titleNum').empty();
                        var _data = jsonData.data.list;
                        var _total = jsonData.data.pieList;
                        $('.loadingimg').hide();
                        Canvas1(_data,times,clientsName);
						Canvas2(_total,clientsName);
                    }

                }else {
                    console.log(jsonData.status)
                }
            })
          
        }
            
        /**********************************************************
        * 功能：获取日期区间
        * ********************************************************/
        Date.prototype.format=function (){
		    var s='';
		    s+=this.getFullYear()+'-';          // 获取年份。
		    s+=(this.getMonth()+1)+"-";         // 获取月份。
		    s+= this.getDate();                 // 获取日。
		    return(s);                          // 返回日期。
		};
		function getAll(begin,end){
			times=[];
		    var ab = begin.split("-");
		    var ae = end.split("-");
		    var db = new Date();
		    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
		    var de = new Date();
		    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
		    var unixDb=db.getTime();
		    var unixDe=de.getTime();
		    for(var k=unixDb;k<=unixDe;){
			    times.push((new Date(parseInt(k))).format());
			    k=k+24*60*60*1000;
		    }
		}

        init();


    </script>
</body>
</html>